.promo {
  position: relative;
  padding-block-start: 27px;
  text-align: center;
  font-family: $font-title;

  @media (max-width: $mobile-width-only) {
    background-color: $basic_green;
    background-image: url("../../img/promo-background-mobile.jpg"), linear-gradient($basic_green 302px, $white 302px);
    background-position: center top;
    background-repeat: no-repeat;
    color: $white;

    &::after {
      position: absolute;
      content: "";
      inset: 0;
      block-size: 302px;
      background-color: $basic_green;
      opacity: 0.85;
    }
  }

  @media (min-width: $tablet-width) {
    text-align: left;
    background-color: transparent;
  }

  @media (min-width: $desktop-width) {    

    &::before{
      position: absolute;
      content: "";
      z-index: -2;
      top: -95px;
      bottom: 0;
      left: 50%;
      right: 0;
      background-color: $basic_green;
      background-image: url("../../img/promo-background-mobile.jpg");
      background-repeat: no-repeat;
      background-position: right 100%;             
    }
    
    &::after {
      position: absolute;
      content: "";
      inset: 0;
      left: 50%;
      background-color: $basic_green;
      opacity: 0.85;
    }
  }
}


.promo__wrapper {
  position: relative;
  z-index: 1;

  @media (min-width: $tablet-width) {
    padding-inline: 90px;
    padding-block: 38px 526px;
    margin-block-end: 0;
  }

  @media (min-width: $desktop-width) {
    padding-inline: 80px 610px;
    padding-block: 84px 185px;
    margin-block-end: 82px;
  }
}

.promo__title {
  margin-block: 0 25px;
  font-size: 36px;
  line-height: 1;
  font-weight: 400;

  @media (min-width: $tablet-width) {
    margin-block: 0 41px;
    font-size: 60px;
    line-height: 1;
    color: $black;
  }
}

.promo__slogan {
  margin-block: 0 29px;
  line-height: 1;
  text-transform: uppercase;

  @media (min-width: $tablet-width) {
    margin-block-end: 49px;
    font-size: 20px;
    line-height: 1;
    color: $black;
  }
}

.promo__img {
  inline-size: 280px;

  @media (min-width: $tablet-width) {
    position: absolute;
    left: 0;
    bottom: 0;
    inline-size: 709px;
    block-size: 609px;
    z-index: -1;
  }

  @media (min-width: $desktop-width) {
    top: 32px;
    left: calc(50% - 162px);
    inline-size: 552px;
    block-size: 499px;
  }
}

.promo__button {
  inline-size: 280px;
  block-size: 40px;
  cursor: pointer;

  &:hover,
  &:active {
    background-color: #5EAA2F;
  }

  &:active {
    color: rgba(255, 255, 255, 0.3);
  }

  @media (min-width: $tablet-width) {
    inline-size: 244px;
    block-size: 54px;
  }
}


    